<script setup lang='ts'>
import { ref } from 'vue';

import router from '@/router';
import { delMessage, detailMessage, getMessage } from '@/views/message1/getMessage';
import useUserStore from '@/store/modules/user';
import { delClass } from '@/views/class/getClass';
// 未知
// const addM=ref('');
// const addData=ref({
//     receiverId:userId,
//     title: '',
//     content: "",
//     sendTime: "",
//     operationId: "",
//     operationType: ""
// })
//
// addMessage(addData.value).then(res=>{
//     console.log(res);
// })

// console.log(isRead.value);
// console.log(addM.value);

// updateMessage().then(res=>{
//     console.log(res);
// })

// function updateStatus() {
//
// }


// 跳转咨询
function toAsk() {
    router.push('/consult');
}

// 获取当前登录用户id
const userId = useUserStore().userId;
const List=ref([])
console.log(userId);
// 渲染列表
getMessage(userId).then(res => {
    console.log(res);
    List.value=res.rows
});

// 消息已读未读
const dotStatus = ref(true);
function allRead() {
    dotStatus.value = false;
}
// 删除
// function deleteMessage(){
//     delMessage().then(res=>{
//         console.log(res);
//     })
// };


</script>
<template>
    <div class='container'>
        <header>
            <h1>系统消息</h1>
            <div class='btnBox'>
                <el-button @click='allRead'>全部已读</el-button>
<!--                <el-button @click='deleteMessage'>全部删除</el-button>-->
            </div>
        </header>

        <div>
            <el-card v-for='item in List' :key='item.id' style='width:100%' shadow='hover' @click='toAsk' >
                <div class='card-header'>
                    <el-badge class='item' v-if='!dotStatus'>预约通知</el-badge>
                    <el-badge is-dot class='item' v-if='dotStatus'>预约通知</el-badge>
                    <div class='data'>
                        {{item.createTime}}
                    </div>
                </div>
                <p>您有新的预约信息，请注意咨询时间</p>
            </el-card>


            <div class='page'>
                <el-pagination background layout='prev, pager, next' :total='1000' />
            </div>

        </div>

    </div>
</template>

<style scoped lang='scss'>
.el-card p{
    font-weight: normal;
}
.page {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
}

.el-card {
    margin: 10px 0;
}

.container {
    padding: 40px;
}

.card-header {
    display: flex;
    justify-content: space-between;
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    //margin:  20px 0;
}

p {
    margin-top: 10px;
}

.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>
